<template>
    <view class="page">
        <view class="step">
			<view class="step-items">
			    <view class="step-items1">1</view>
			    <view class="step-items1-name">绑定卡板</view>
			</view>
            <view class="step-items">
                <view class="step-items1 step-items2">2</view>
                <view class="step-items1-name">购买套餐</view>
            </view>
            <view class="step-items">
                <view class="step-items1 step-items2">3</view>
                <view class="step-items1-name">实名激活</view>
            </view>
        </view>
       <view class="u-form">
		   <view class="name">设备卡号</view>
		   <view class="tip">卡板编号位于手机小卡的背面 </view>
		   <image src="../../static/img/icon16.png" mode=""></image>
		   <u-input placeholder="请输入设备卡号"  border="bottom" v-model="iccid">
				<u-text text="设备卡号：" slot="prefix" margin="0 3px 0 0" size="28" color="#28292D"></u-text>
				<!-- <template slot="suffix">
					<u-icon name="scan" size="60" @click="scanCode"></u-icon>
				</template> -->
			</u-input>
			   
	   </view>
        <u-button type="primary" block shape="circle" color="#397EF5" @click="nextClick">下一步</u-button>
		<view class="u-form">
		   <view class="name">温馨提示</view>
		   <view class="tip1" style="margin-top:30upx;">您正在使用的卡为预充值卡，预充值卡流量更多，价格更优惠。 </view>
			<view class="tip1">预充值卡系统自动订购每月流量套餐，请确保余额充足。 </view>
		</view>
    </view>
</template>

<script>
	export default{
		data(){
			return{
				iccid:''
			}
		},
		methods:{ 
			nextClick(){
				if(!this.iccid){
					uni.showToast({
						title: '请输入设备卡号！',
						icon: 'none'
					})
					return
				}
				var params = {
					userPhone:uni.getStorageSync('userPhone'),
					iccid:this.iccid
				}
				var arr = ['iccid','phoneNo','virtualNo','supplierCode','basePkgGroup','salePrice','imgUrl','payPrice','giveSimAccount'
				,'saleType']
				this.$api.simLogin(params).then(res=>{
					if(res.code === '200'){
						//缓存数据，后面会用到
						arr.forEach(item=>{
							uni.setStorageSync(item,res.data[item])
						})
						if(!res.data.tuiPrice || res.data.tuiPrice <= 0){//跳转到到优惠券页面
							// if(res.data.giveSimAccount==1){ // 赠送20元余额页面
							// 	this.$utils.navigateTo('/pages/serviceCenter/index')
							// }else {
							// 	this.$utils.navigateTo('/pages/user/simOpens')
							// }
							if(res.data.saleType==20){
								this.$utils.navigateTo('/pages/simAllOpenThree/index')
							}else{
								this.$utils.navigateTo('/pages/user/simOpens')
							}
						}else if((!res.data.havePkg || res.data.havePkg <= 0)&&res.data.giveSimAccount==1){//跳转到到套餐页面
							//this.$utils.navigateTo('/pages/bindCard/index')
							this.$utils.switchTab('/pages/index/index')
						}else{ //直接首页
							this.$utils.switchTab('/pages/index/index')
						}
						
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			//扫码
			scanCode(){
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.iccid = res.result
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
    padding:30px 0 20px;
    background:#F4F6FA;
	height: calc(100% - 50px);
    .step{
        width:90%;
        margin:0 auto;
        display: flex;
        position: relative;
        justify-content:space-between;
        &::after{
            display: block;
            content: '';
            height:1px;
            width:80%;
            border-top:1px dashed #979797;
            position: absolute;
            top:16px;
            left:34px;
            z-index: 0;
        }
        .step-items{
            position: relative;
            z-index: 1;
        }
        .step-items1{
            width: 33px;
            height: 33px;
            border-radius:100%;
            text-align: center;
            line-height:33px;
            color: #fff;
            margin:0 auto;
            background: #397EF5;
        }
		.step-items2{
			background: #A8B5CA;
		}
        .step-items1-name{
            height: 21px;
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 21px;
            margin-top:10px;
        }
    }
	.u-form{
		width:calc(90% - 28upx );
		padding:50upx 28upx;
		margin:46upx auto;
		background:#fff;
		border-radius: 20upx;
		.name{
			height: 40upx;
			font-size: 28upx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #28292D;
			line-height: 40upx;
		}
		.tip{
			font-size: 28upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #63666D;
			margin-top:18upx;
			margin-bottom:40upx;
		}
		image{
			width:640upx;
			height:216upx;
		}
		.u-input{
			margin-top:98upx;
			border-bottom:1px solid #F3F3F3;
		}
		.tip1{
			font-size: 28upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #63666D;
			text-indent:56upx;
		}
	}
    .u-button{
        width:90%;
        margin:40px auto 0;
    }
}
</style>